<template>
    <div class="userinfo-phone">
        <h-header lftext="取消" title="更换手机号" @dele="confirm" delet="确定"></h-header>
        <div class="item">
            <div class="left">手机号</div>
            <div class="input"><input type="text" v-model="phone" placeholder="请输入11位手机号"></div>
            <div @click="getcode()" class="code">{{code}}</div>
        </div>
        <div class="item">
            <div class="left">验证码</div>
            <div class="input"><input  v-model="verification" type="text" placeholder="请输入6位验证码"></div>
        </div>
        <div class="popup-container">
			<mt-popup
			  v-model="popupVisible"
			  position="top"
			  :modal="modal">
			  {{popupContent}}
			</mt-popup>
		</div>
    </div>
</template>

<script>
import Header from '../common/header';
import axios from 'axios';
import { MessageBox, Popup } from 'mint-ui';
export default {
    data () {
        return {
            code: '获取验证码',
			time: 60,
			phone: '',
			popupVisible: false,
			popupContent: '',
			modal: false,
			verification: ''
        }
    },
    components: {
        'h-header': Header,
        'mt-popup': Popup,	
    },
    created () {
        
    },
    mounted() {
        const vm = this;
        let url = window.location.href;
        vm.wxShare(url);
    },
    methods: {
        deletetext(){
            const vm = this;
            vm.text = '';
        },
       getcode(){
			const vm = this;
			let phoneReg = /^1[34578]\d{9}$/;
			if (!phoneReg.test(vm.phone)) {
				vm.popupVisible = true;
				vm.modal = true; 
				vm.popupContent = '请输入正确的手机号码';
				setTimeout(function() {
					vm.popupVisible = false;
				}, 1600);
			}else {
				vm.code = vm.time+'s';
				let timer = setInterval(function(){
					vm.time = vm.time-1;
					vm.code = vm.time+'s';
					if(vm.time==0){
						clearInterval(timer);
						vm.code = "获取验证码";
						vm.time=60
					}
				},1000)
				axios.post(`/Weixin/Sms/sms_send`,{phone: vm.phone}).then(res=>{
                    let data = res.data;
                    console.log(data);
					if(data.code==1){
						vm.$toast('短信发送成功');
					}else {
                        clearInterval(timer);
                        MessageBox.alert(data.msg);
                        vm.code = "获取验证码";
						vm.time=60;
					}
				}).catch(()=>{MessageBox.alert('网络错误')})
			}      
        },
        confirm(){
            const vm = this;
			axios.post(`/Weixin/Sms/verify`,{phone: vm.phone,code: vm.verification}).then(res=>{
				let data = res.data;
                if(data.code==1){
                    axios.post('/Weixin/Member/bindPhone',{phone: vm.phone}).then(res=>{
                        let json = res.data;
                        if(json.code==1){
                            vm.$router.replace('/userinfo')
                            vm.$toast(data.msg);
                        }else {
                            MessageBox.alert(json.msg);
                        }
                    })
                }else {
                    MessageBox.alert(data.msg);
                }
            }).catch(()=>{MessageBox.alert('网络错误')})
        }	
    }
}
</script>

<style>

</style>
